<template>
  <div class="calculate">

    <div class="filtrate">
      <div class="filtrate-right">
        <el-input placeholder="请输入算法名称" v-model="search">
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchClick"
          ></el-button>
        </el-input>
      </div>
    </div>

    <div class="numerical-order">
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        style="width: 100%"
        border
        @row-click="calculateDetail"
      >
        <el-table-column prop="id" label="序号" width="300"></el-table-column>
        <el-table-column prop="name" label="名称" width="400">
        </el-table-column>
        <el-table-column prop="classes" label="类别" width="300">
        </el-table-column>
        <el-table-column prop="level" label="难度" width="290">
        </el-table-column>
      </el-table>
      <el-pagination
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total,sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>

  </div>
</template>

<script>
import "@/assets/css/calculate.css";
export default {
  name: "calculate",
  data() {
    return {
      search: "",
      currentPage: 1,
      pageSize: 10,
      tableData: [
        {
          id: "1",
          name: "Java实践训练",
          classes: "技术篇",
          level: "难",
        },
        {
          id: "2",
          name: "Java实践训练",
          classes: "技术篇",
          level: "难",
        },
        {
          id: "3",
          name: "Java实践训练",
          classes: "技术篇",
          level: "难",
        },
        {
          id: "4",
          name: "Java实践训练",
          classes: "技术篇",
          level: "难",
        },
        {
          id: "1",
          name: "Java实践训练",
          classes: "技术篇",
          level: "难",
        },
        {
          id: "2",
          name: "Java实践训练",
          classes: "技术篇",
          level: "难",
        },
        {
          id: "3",
          name: "Java实践训练",
          classes: "技术篇",
          level: "难",
        },
        {
          id: "4",
          name: "Java实践训练",
          classes: "技术篇",
          level: "难",
        },
        {
          id: "1",
          name: "Java实践训练",
          classes: "技术篇",
          level: "难",
        },
        {
          id: "2",
          name: "Java实践训练",
          classes: "技术篇",
          level: "难",
        },
        {
          id: "3",
          name: "Java实践训练",
          classes: "技术篇",
          level: "难",
        },
        {
          id: "4",
          name: "Java实践训练",
          classes: "技术篇",
          level: "难",
        },
      ],
    };
  },
  methods: {
    // 点击搜索按钮
    searchClick() {
      if (this.search != "") {
        // 跳转到全部商品页面,并传递搜索条件
        // this.$router.push({
        //   path: "/calculate",
        //   query: { search: this.search },
        // });
        // this.search = "";
      }
    },

    calculateDetail(row, event, column) {
      console.log("跳转");
      this.$router.push({
        path: "/calculateDetail",
        query: { rsa_id: row.id },
      });
    },
    // 获取线性算法列表
    getCalculateAsa() {
      // 发送请求url
      console.log("getCalculateAsa");
      /**
       * 将 tableData 数据请求返回,再将数据存储到data
       */
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  },

  /**
   * created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
   * mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
   */

  created: function () {
    this.getCalculateAsa();
  },
};
</script>

<style></style>
